import React, { useEffect } from 'react'
import G6 from '@antv/g6'
import { data } from './config'

const AntV = () => {
  useEffect(() => {
    const graph = new G6.Graph({
      container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
      width: 800, // Number，必须，图的宽度
      height: 500, // Number，必须，图的高度
      nodeStateStyles: {
        // 鼠标 hover 上节点，即 hover 状态为 true 时的样式
        hover: {
          fill: 'lightsteelblue',
        },
        // 鼠标点击节点，即 click 状态为 true 时的样式
        click: {
          stroke: '#000',
          lineWidth: 3,
        },
      },

      // 边不同状态下的样式集合
      edgeStateStyles: {
        // 鼠标点击边，即 click 状态为 true 时的样式
        click: {
          stroke: 'steelblue',
        },
      },
      modes: {
        default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
      },
      layout: {
        type: 'dagre',
      },
    })
    graph.data(data) // 读取 Step 2 中的数据源到图上
    // 设置各个边样式及其他配置，以及在各个状态下节点的 KeyShape 的样式。
    graph.edge(() => {
      return {
        style: {
          stroke: '#F6BD16',
        },
      }
    })
    graph.render()

    // 鼠标进入节点
    graph.on('node:mouseenter', (e) => {
      const nodeItem = e.item // 获取鼠标进入的节点元素对象
      graph.setItemState(nodeItem, 'hover', true) // 设置当前节点的 hover 状态为 true
    })

    // 鼠标离开节点
    graph.on('node:mouseleave', (e) => {
      const nodeItem = e.item // 获取鼠标离开的节点元素对象
      graph.setItemState(nodeItem, 'hover', false) // 设置当前节点的 hover 状态为 false
    })

    // 点击节点
    graph.on('node:click', (e) => {
      // 先将所有当前是 click 状态的节点置为非 click 状态
      const clickNodes = graph.findAllByState('node', 'click')
      clickNodes.forEach((cn) => {
        graph.setItemState(cn, 'click', false)
      })
      const nodeItem = e.item // 获取被点击的节点元素对象
      graph.setItemState(nodeItem, 'click', true) // 设置当前节点的 click 状态为 true
    })

    // 点击边
    graph.on('edge:click', (e) => {
      // 先将所有当前是 click 状态的边置为非 click 状态
      const clickEdges = graph.findAllByState('edge', 'click')
      clickEdges.forEach((ce) => {
        graph.setItemState(ce, 'click', false)
      })
      const edgeItem = e.item // 获取被点击的边元素对象
      graph.setItemState(edgeItem, 'click', true) // 设置当前边的 click 状态为 true
    })
  }, [])
  return <div id="mountNode"></div>
}

export default AntV
